<template>
  <div>
    <el-button type="primary" style="margin-bottom: 10px" @click="addRow">新增分类</el-button>
    <el-dialog v-model="dialogVisisble" :title="id!=0?'修改分类':'新增分类'" :before-close="handleBeforeClose">
      <CategoryEdit ref="categoryForm" :id="id" @success="editSuccess"></CategoryEdit>
    </el-dialog>
    <el-table
        ref="tableRef"
      :data="tableData"
      border
      style="margin-bottom: 20px"
      row-key="id"
      default-expand-all
    >
      <el-table-column prop="name" label="分类名称" sortable/>
      <el-table-column label="分类级别">
        <template #default="{ row }">
          <span v-if="row.pid == 0">一级分类</span>
          <span v-else>二级分类</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="分类编号" />
      <el-table-column label="分类图片">
        <template #default="{ row }">
          <el-image
            v-if="row.picture !== ''"
            :src="row.picture"
            fit="contain"
            style="display: flex; align-items: center; height: 60px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button type="warning" @click="editRow(row)">编辑</el-button>
          <el-button type="danger" @click="delRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref,onMounted} from "vue";
import { getCategoryList,delCategory} from '../../api'
import { ElMessageBox,ElMessage } from "element-plus";
import CategoryEdit from "../../components/categoryEdit.vue";
const tableData = ref([]);
const dialogVisisble=ref(false)
const id=ref(0)
onMounted(() => {
  loadCategoryList()
})

const editSuccess=()=>{
  loadCategoryList()
  dialogVisisble.value=false
}

const loadCategoryList = async () => {
  const data = await getCategoryList()
  tableData.value = convertToTree(data)
}
const convertToTree = (data) => {
  const treeData = []
  const map = {}
  for (const item of data) {
    map[item.id] = { ...item, children: [] }
  }
  for (const item of data) {
    const node = map[item.id]
    if (item.pid === 0) {
      treeData.push(node)
    } else {
      const parent = map[item.pid]
      parent.children.push(node)
    }
  }
  return treeData
}
const addRow=()=>{
  id.value=0
  dialogVisisble.value=true
}

const editRow=row=>{
  id.value=row.id
  dialogVisisble.value=true
}

const delRow=row=>{
  if(row.pid==0&&row.children.length!=0){
    ElMessage({
      type:'warning',
      message:'该分类下存在二级分类，请先清除二级分类在删除此分类'
    })
  }else{
    ElMessageBox.confirm('确认要删除此分类吗？',{
      closeOnClickModal:false,
      confirmButtonText:'确定',
      cancelButtonText:'取消'
    }).then(async()=>{
      if(await delCategory({id:row.id})){
        loadCategoryList()
      }
    }).catch(()=>{})
  }
}

const handleBeforeClose=()=>{
  ElMessageBox.confirm('确定关闭对话框吗？',{
    showClose:false,
    closeOnClickModal:false,
    confirmButtonClass:'确定',
    cancelButtonClass:'取消'
  }).then(()=>{
    dialogVisisble.value=false
  }).catch(()=>{})
}
</script>